<script lang="ts" setup>
	interface Props {
		title ?: string
		cover ?: string
	}

	defineProps<Props>()
</script>

<template>
	<view class="x-product">
		<view class="x-product-cover">
			<x-image :src="cover" :prefix="false" width="250rpx" height="250rpx"></x-image>
		</view>
		<view class="x-product-content">
			<view class="x-product-title" v-if="title">{{title}}</view>
			<slot></slot>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.x-product {
		display: flex;
		gap: 20rpx;

		&-title {
			font-size: 26rpx;
			height: 66rpx;
			font-weight: bold;
			color: #000;
		}

		&-cover {
			width: 250rpx;
			height: 250rpx;
			background-color: #f2f2f2;
			border-radius: 20rpx;
			overflow: hidden;
		}

		&-content {
			flex: 1;
		}
	}
</style>